<ul class="heroes">
    <li *ngFor="let hero of heroes">
      <a routerLink="/detail/{{hero.id}}">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </a>
      <button class="delete" title="delete hero"
          (click)="delete(hero)">x</button>
    </li>
  </ul>
  <div>
      <label>Hero name:
        <input #heroName />
      </label>
      <!-- (click) passes input value to add() and then clears the input -->
      <button (click)="add(heroName.value); heroName.value=''">
        add
      </button>
    </div>
